<template>
	<s-layout title="排队领车" class="withdraw-wrap">
		<view class="list-box">
		  <view v-if="state.pagination.data.length > 0">
		    <view
		      class="list-item ss-flex ss-col-center xs-goods-card"
		      v-for="item in state.pagination.data"
		      :key="item.id"
		    >
		      <image class="xs-img-box" v-if="item.goods" :src="sheep.$url.cdn(item.goods.image)" mode="aspectFill"></image>
			  <view class="ss-m-l-20 ss-flex-1" v-if="item.goods">
				  <view class="xs-goods-title ss-line-1">{{ item.goods.title }}</view>
				  <view class="ss-flex ss-row-between ss-m-t-20">
					  <view class="xs-goods-price font-OPPOSANS">￥{{ item.money }}</view>
					  <button class="ss-reset-button cart-btn">
					    {{ item.status == 1 ? '排队中' : '已领取' }}
					  </button>
				  </view>
				  <!-- <view class="xs-goods-time ss-m-t-10">{{ item.createtime }}</view> -->
			  </view>
		    </view>
		  </view>
		  <s-empty v-else text="暂无数据" icon="/static/data-empty.png" />
		</view>
		
		<uni-load-more
		  v-if="state.pagination.data.length > 0"
		  :status="state.loadStatus"
		  :content-text="{
		    contentdown: $t('pages.user.wallet.load'),
		  }"
		  @tap="onLoadMore"
		/>
	</s-layout>
</template>

<script setup>
	import sheep from '@/sheep';
	import { onLoad, onReachBottom } from '@dcloudio/uni-app';
	import { computed, reactive } from 'vue';
	import _ from 'lodash';
	
	const pagination = {
	  data: [],
	  current_page: 1,
	  total: 1,
	  last_page: 1,
	};
	
	const state = reactive({
	  currentTab: 0,
	  pagination,
	  loadStatus: '',
	});
	
	async function getList(page = 1, list_rows = 8) {
	  state.loadStatus = 'loading';
	  let res = await sheep.$api.user.car_goods({
	    list_rows,
	    page,
	  });
	  if (res.code === 1) {
	    let list = _.concat(state.pagination.data, res.data);
	    state.pagination = {
	      ...res,
	      data: list
	    };
	    if (state.pagination.current_page < state.pagination.last_page) {
	      state.loadStatus = 'more';
	    } else {
	      state.loadStatus = 'noMore';
	    }
	  }
	}
	onLoad(async (options) => {
	  getList();
	});
	
	function onLoadMore() {
	  if (state.loadStatus !== 'noMore') {
	    getLogList(state.pagination.current_page + 1);
	  }
	}
	onReachBottom(() => {
	  // onLoadMore();
	});
</script>

<style lang="scss" scoped>
	.list-box {
		padding: 20rpx;
	}
	.xs-goods-card {
	  padding: 20rpx;
	  overflow: hidden;
	  border-radius: 20rpx;
	  background-color: $white;
	  position: relative;
    }
	.xs-img-box {
	  width: 128rpx;
	  height: 128rpx;
	  margin-right: 20rpx;
	}
	.xs-goods-price {
	  font-size: 30rpx;
	  color: $red;
	}
	.xs-goods-time {
		color: #999;
	}
	.cart-btn {
		color: #fff;
		font-size: 24rpx;
		padding: 6rpx 20rpx;
		height: 52rpx;
		border-radius: 26rpx;
		background: linear-gradient(to right, rgb(64, 118, 244), rgb(6, 33, 203));
	}
</style>